// @import "../../node_modules/@material/layout-grid/dist/mdc.layout-grid.css";
@import "./style/index";
* {
  box-sizing: border-box;
}

@palette: {
  grey:     #EFEFEF
};

#root {
  overflow: hidden;
}

.root-builder {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  clear: both;
  border: none;
  user-select: none;
}

.builder-editor {
  position: relative;
  display: block;
  // height: auto;
  // width: auto;
  // min-width: 100%;
  // min-height: 100%;
  // transform: scale(1, 1) rotate(0) translate(0, 0);

  margin: 0;
  overflow: hidden;

  background-image:
      linear-gradient(#eee 1px,transparent 0),
      linear-gradient(90deg, #eee 1px,transparent 0);
  background-size: 40px 40px, 40px 40px;

  .draggable {
    border: 1px solid #aaa;
  }

  .droppable {
    border: 1px dashed #aaa;
  }
}

.root-builder {

  &-droppables {
    position: relative;
    overflow: hidden;
    margin: auto;
    // width: 800px;

    text-align: left;
    /*.root-builder {
      width: 800px;
      .draggable-component {
        display: block;
        float: none;
        margin: 0;
        width: 100%;
        margin-bottom: 5px;
      }
    }*/
  }
  &-information {
    width: 240px;
  }
}


